<template>
  <header>
    <div class="flex" style="flex-direction:row-reverse;margin-right: 14vw;margin-top: 13px;">
      <el-button type="primary" plain @click="about">About</el-button>
    </div>
    <div class="info">
      <div>
        <i style="font-size:105px;color:rgb(220,220,220);" class="iconfont icon-touxiang"></i>
      </div>
      <div style="font-size:30px">{{Name}}</div>
      <div style="font-size:19px;color:rgb(184,179,173)">{{Info}}</div>
      <div style="font-size:19px;color:rgb(184,179,173)">客户端专周实训</div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      Name: "张皓然",
      Info: "重庆工程学院——179001202"
    };
  },
  methods: {
    about() {
      this.$alert("179001202--张皓然--重庆工程学院", "关于我", {
        confirmButtonText: "确定",
      });
    }
  }
};
</script>

<style>
header {
  height: 35vh;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-items: center; */
}

.info > div {
  text-align: center;
}
</style>